<template>
  <span :style="{ 'margin-top': props.maxMargin ? '25px' : '0px' }">
    <span v-if="props.data && props.data.length < props.maxLen">
      <span
        class="tj"
        :style="{
          color: store.styleInfo.fontColor,
          fontSize: store.styleInfo.contentSize,
        }"
        >{{ props.data }}</span
      >
    </span>
    <div class="else" v-else>
      <div class="unit-exbit-null-remarks-info">
        <div class="unit-exbit-null-remarks-info-remarks" :id="'subunit_scorrl' + props.id">
          <span
            :style="{
              color: store.styleInfo.fontColor,
              fontSize: store.styleInfo.contentSize,
            }"
            :id="'tem11_subunit_scorrl' + props.id"
            class="tj"
            ref="tj"
            >{{ showBtn ? sliceStr : props.data }}
            <span
              :style="{
                color: store.styleInfo.shmentColor,
                fontSize: store.styleInfo.contentSize,
              }"
              class="btnWord"
              @click="showModel"
              >{{ showBtn ? tip : '收起' }}</span
            >
          </span>
        </div>
      </div>

      <HwScrollYVue :remarks="props.data" :showBtn="showBtn" :id="props.id"></HwScrollYVue>
    </div>
  </span>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getTextHtml } from '@/utils/minxin';
import { computed, ref } from 'vue';
import { useProjectStore } from '@/store';
import HwScrollYVue from './hwScrollY.vue';
const textVisible = ref(false);
const store = useProjectStore();
const showBtn = ref(true);
const tj = ref(null);
const props = defineProps({
  tip: {
    type: String,
    default: '详情',
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
  // 最大长度
  maxLen: {
    type: Number,
    default: 60,
  },
  maxMargin: {
    type: Boolean,
    default: true,
  },
  id: Number,
});
const flag = ref(false);
const showModel = () => {
  // textVisible.value = true;
  // const lineHeight = parseFloat(getComputedStyle(tj.value).lineHeight);
  // const height = tj.value.offsetHeight;
  // const numLines = Math.ceil(height / lineHeight);
  // //console.log('行数：', numLines, height, lineHeight);
  // if (numLines > 7 && showBtn.value) {
  //   flag.value = true;
  // }
  showBtn.value = !showBtn.value;
  //console.log(showBtn.value);
};
const sliceStr = computed(() => {
  if (props.data != null) {
    //console.log(props.data.length);

    return props.data.substring(0, props.maxLen) + '...';
  }
  return '';
});
</script>

<style lang="less" scoped>
.btnWord {
  cursor: pointer;
  color: #d2ad77;
  font-weight: 400;
  line-height: 30px;
}
.tj {
  // height: 100%;
  display: inline-block;
  text-align: justify;
  font-size: 16px;
  // font-family: SourceHanSerifCN;
  color: #333333;
  line-height: 28px;
  // overflow-y: scroll;
}
.text-body-item {
  display: flex;
  flex-direction: column;
  height: 340px;
  // overflow: scroll;
  span {
    // text-indent: 2em;
  }
}
:deep(.t-dialog__footer) {
  display: none;
}
.else {
  display: flex;
  height: 262px;
  // overflow-y: scroll;
}
.unit-exbit-null-remarks-info {
  // display: flex;
  // width: 560px;
  min-height: 240px;
  position: relative;
  // overflow-y: auto;
  .unit-exbit-null-remarks-info-remarks {
    // flex: 1;
    height: 262px;
    overflow-y: auto;
    span {
      // text-indent: 2em;
      font-size: 16px;
      // font-weight: 500;
      color: #333333;
      line-height: 32px;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>
